<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            text-align: center;
            box-sizing: border-box;                      
        }
        .divA{
            width: 100%;
            height: 30px;
            border: 1px solid #000;
            line-height: 30px;            
        }
        .wrap{
            overflow: hidden;
            position: absolute;
            top: 30px;
            width: 100%;
            bottom: 10px;
        }
        .divB{
            width: 150px;
            float: left;
            height: 100%;
            border: 1px solid #000;
            line-height: 1;  
        }
        .divC{
            width: calc(100% - 150px);
            float: left;
            height: 100%;
            border: 1px solid #000;
            line-height: 1;
        }
        .divD{
            width: 100%;
            height: 10px;
            border: 1px solid #000;
            line-height: 10px;
            position: fixed;
            bottom: 0;
        }
        </style>
    </head>
    <body>
        <div class="divA">
            A
        </div>
        <div class="wrap">
            <div class="divB">B</div>
            <div class="divC">C</div>
        </div>
        <span style="height: 100px;"></span>
        <div class="divD">D</div>
    </body>
</html>